<!--
 * @Descripttion: 合并组件
 * @version: 0.0.1
 * @Author: zhangmeng
 * @Date: 2022-02-19 16:16:47
 * @LastEditors: zhangmeng
 * @LastEditTime: 2022-10-18 09:21:41
-->
<template>
  <div class="tool-combination">
  	<div class="tool-combination-content" :style="{
  		transform: `scaleX(${xscale}) scaleY(${yscale})`
  	}">
  		<div class="tool-combination-child" v-for="(item) in childs" :key="item.id" :ref="item.id" :style="{
  		width: `${item.w}px`,
  		height: `${item.h}px`,
  		top: `${item.y}px`,
  		left: `${item.x}px`,
  	}">
  			<component :is="item.name" :config="item" :count="item.count" />
  		</div>
  	</div>
  </div>
</template>

<script>
import mixins from '../mixin'
export default {
  name: 'tool-combination',
  mixins: [mixins],
  data() {
    return {
      xscale: 1,
      yscale: 1
    };
  },
  computed: {
    childs() {
      return this.config.config.childs
    },
	origin(){
		return this.$store.state.design.origin
	}
  },
  watch: {
  	complex: {
  		// 开启深度监听
  		deep: true,
  		handler(val) {
  			this.xscale = val.xscale
  			this.yscale = val.yscale
  		},
  	},
  	'complex.w': {
  		handler(val) {
  			this.changeWidth(val)
  		},
  	},
  	'complex.h': {
  		handler(val) {
  			this.changeHeight(val)
  		},
  	}
  },
  methods: {
  	// 修改组件内子元素的位置以及宽高
  	changeWidth(val) {
  		if (this.origin) {
  			this.complex.xscale = val / this.origin.w
  			this.xscale = val / this.origin.w
  		}
  	},
  	// 修改组件内子元素的位置以及宽高
  	changeHeight(val) {
  		if (this.origin) {
  			this.complex.yscale = val / this.origin.h
  			this.yscale  = val / this.origin.h
  		}
  	}
  },
  pageData: {
    version: '0.0.1',
    hidden: true, // 非功能组件,hidden属性可隐藏
    name: "tool-combination",
    title: "组合",
    count: 0,
    width: 200,
    height: 60,
    config: {
      label: '组合',
      data: null,
      childs: [],
      attr: [],
    }
  },
};
</script>
<style scoped lang="scss">
.tool-combination {
  width: 100%;
  height: 100%;
  
  .tool-combination-content {
  	position: absolute;
  	width: 100%;
  	height: 100%;		
  	transform-origin: 0 0;
  }

  .tool-combination-child {
    position: absolute;
  }
}
</style>
